<template>
	<van-config-provider :theme-vars="themeVars">
		<div class="index-page">
			<!-- 顶部渐变背景和步骤条区域 -->
			<NavHeader
				:title="t('index.title')"
				:showStepProgress="true"
				:current="currentStep"
			/>

			<!-- 预约流程卡片 -->
			<van-card class="flow-card" :title="t('index.flowCardTitle')">
				<template #desc>
					<div
						class="flow-step"
						v-for="(step, idx) in flowSteps"
						:key="idx"
					>
						<div class="flow-step-index">{{ idx + 1 }}</div>
						<div class="flow-step-content">
							<div class="flow-step-title">
								{{ t(step.title) }}
							</div>
							<div class="flow-step-desc">{{ t(step.desc) }}</div>
						</div>
					</div>
				</template>
			</van-card>

			<!-- 安装前准备卡片 -->
			<van-card class="prepare-card" :title="t('index.prepareCardTitle')">
				<template #desc>
					<div
						class="flow-step"
						v-for="(item, idx) in prepareList"
						:key="idx"
					>
						<span class="dot"></span>
						<div class="flow-step-content">
							<div class="flow-step-desc">{{ t(item) }}</div>
						</div>
					</div>
				</template>
			</van-card>

			<!-- 底部操作区 -->
			<div class="bottom-bar">
				<div
					class="hotline-bar-figma"
					@click="window.location.href = `tel:${phoneNumber}`"
					style="cursor: pointer"
				>
					<img
						src="@/assets/home/icon-kefu-blue.png"
						class="hotline-icon"
						:alt="t('index.customerService')"
					/>
					<span class="hotline-text">{{
						t('index.callHotline')
					}}</span>
				</div>
				<van-button
					type="primary"
					block
					round
					color="#0065D1"
					class="next-btn"
					@click="onNext"
					>{{ t('index.nextStep') }}</van-button
				>
			</div>
		</div>
	</van-config-provider>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import StepProgress from '@/components/StepProgress.vue'
import NavHeader from '@/components/NavHeader.vue'
import { useRouter, useRoute } from 'vue-router'
import { useOrderStore } from '@/stores/order'
import { getOrderDetailApi } from '@/api/user'
import { showToast } from 'vant'
import { useI18n } from 'vue-i18n'
import { setLocale } from '../i18n'
import { Locale } from 'vant'
import enUS from 'vant/es/locale/lang/en-US'
import zhCN from 'vant/es/locale/lang/zh-CN'
// 存储浏览器语言信息
const browserLanguage = ref(navigator.language)
const browserPreferredLanguages = ref(navigator.languages)
const { t } = useI18n()

const router = useRouter()
const route = useRoute()
const currentStep = 0 // 当前步骤索引，根据业务可动态调整
const flowSteps = [
	{
		title: 'index.step1Title',
		desc: 'index.step1Desc',
	},
	{
		title: 'index.step2Title',
		desc: 'index.step2Desc',
	},
	{
		title: 'index.step3Title',
		desc: 'index.step3Desc',
	},
	{
		title: 'index.step4Title',
		desc: 'index.step4Desc',
	},
]
const prepareList = ['index.prepare1', 'index.prepare2']
const themeVars = {
	cardBackground: '#fff',
	cardRadius: '15px',
	buttonPrimaryBackground: '#0065D1',
	buttonPrimaryBorderColor: '#0065D1',
}
const phoneNumber = '119'
const orderStore = useOrderStore()

onMounted(() => {
	checkOrderState()
	console.log('浏览器语言:', browserLanguage.value)
	console.log('偏好语言列表:', browserPreferredLanguages.value)
	console.log('URL参数:', route.query)

	// 1. 首先检查URL中是否有语言参数 (最高优先级)
	if (route.query.lang && typeof route.query.lang === 'string') {
		console.log('检测到URL中的语言参数:', route.query.lang)
		setLocale(route.query.lang)
		if (route.query.lang == 'zh') {
			Locale.use('zh-CN', zhCN)
		} else {
			Locale.use('en-US', enUS)
		}
	}
	// 2. 其次检查localStorage中是否有用户之前保存的语言偏好
	else if (localStorage.getItem('userLanguage')) {
		const savedLanguage = localStorage.getItem('userLanguage')
		console.log('从localStorage检测到语言偏好:', savedLanguage)
		if (savedLanguage) {
			setLocale(savedLanguage)
		}
	}
	// 3. 最后检查浏览器的语言设置
	else {
		console.log('使用浏览器语言偏好')
		// 这里会使用默认的语言检测逻辑
	}
})

watch(
	() => orderStore.state,
	() => {
		checkOrderState()
	}
)

function checkOrderState() {
	console.log('订单状态', orderStore.state)
	if (orderStore.state === 9) {
		router.replace({ name: 'index' })
	} else if (orderStore.state === 5 || orderStore.state === 6) {
		router.replace({ name: 'CustomerReview' })
	} else if (
		orderStore.state === 1 ||
		orderStore.state === 2 ||
		orderStore.state === 3 ||
		orderStore.state === 4 ||
		orderStore.state === 7 ||
		orderStore.state === 8
	) {
		router.replace({ name: 'OrderSuccess' })
	} else {
		router.replace({ name: 'index' })
	}
}

function onNext() {
	if (!orderStore.order_no) {
		showToast(t('index.noOrderNoTip'))
		return
	}
	router.push({ name: 'BaseInfo' })
}
</script>

<style scoped>
.index-page {
	min-height: 100vh;
	background: #f3f4f6;
	padding-bottom: 140px;
}
.flow-card,
.prepare-card {
	margin: 16px 13px 0 13px;
	border-radius: 15px;
}
.flow-card :deep(.van-card__title),
.prepare-card :deep(.van-card__title) {
	color: #000;
	font-size: 16px;
	font-family: PingFang SC, sans-serif;
	font-weight: 600;
	word-wrap: break-word;
	margin-top: 10px;
	margin-bottom: 19px;
}
.flow-card :deep(.van-card__desc) {
	margin-top: 8px;
}
.flow-step {
	display: flex;
	align-items: flex-start;
	margin-bottom: 16px;
}
.flow-step-index {
	width: 24px;
	height: 24px;
	background: #93c7ff;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 24px;
	font-weight: 600;
	margin-right: 8px;
}
.flow-step-content {
	flex: 1;
}
.flow-step-title {
	font-size: 14px;
	font-weight: 500;
	color: #3c3c3c;
}
.flow-step-desc {
	font-size: 12px;
	color: #9c9b9b;
}
.prepare-list {
	padding-left: 20px;
	color: #9c9b9b;
	font-size: 12px;
}
.bottom-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	background: #fff;
	padding: 10px 13px 20px 13px;
	z-index: 10;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);
}
.next-btn {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
}
.hotline-bar-figma {
	width: 120px;
	height: 30px;
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 0 5px 0 rgba(157, 157, 157, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px auto;
}
.hotline-icon {
	width: 20px;
	height: 20px;
	margin-right: 8px;
}
.hotline-text {
	font-size: 12px;
	font-family: 'PingFang SC', sans-serif;
	font-weight: 500;
	color: #000;
	letter-spacing: -0.3px;
	line-height: 1;
}
.dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #0065d1;
	border-radius: 50%;
	margin-right: 12px;
	margin-top: 6px;
	flex-shrink: 0;
}
.prepare-card :deep(.van-card__desc) {
	margin-top: 8px;
}
</style>
